<template>
  <a-layout>
    <the-header></the-header>
    <router-view/>
    <the-footer></the-footer>
  </a-layout>
</template>
<script lang="ts">
  import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
  import TheHeader  from '@/components/the-header.vue';
  import TheFooter  from '@/components/the-footer.vue';
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    name: 'app',
    components: {
      TheHeader,
      TheFooter,
      UserOutlined,
      LaptopOutlined,
      NotificationOutlined,
    },
    setup() {
      return {
        selectedKeys1: ref<string[]>(['2']),
        selectedKeys2: ref<string[]>(['1']),
        collapsed: ref<boolean>(false),
        openKeys: ref<string[]>(['sub1']),
      };
    },
  });
</script>